<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			/* 去掉默认箭头 */
			summary {
				list-style: none;
			}

			mark {
				background-color: green;
				color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<!-- details summary 展开 ****************************************************************** -->
		<!-- open 默认打开 -->
		<!-- <details class="details" open> -->
		<details class="details">
			<summary>标题</summary>

			<!-- 地图 ****************************************************************** -->
			<div>
				<img src="./canvas图片/01/img/a.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
				<map name="circusmap">
					<area shape="rect" coords="67,114,207,254" href="http://www.baidu.com/">
					<area shape="rect" coords="222,141,318, 256" href="http://www.baidu.com/">
					<area shape="rect" coords="343,111,455, 267" href="http://www.baidu.com/">
					<area shape="rect" coords="35,328,143,500" href="http://www.baidu.com/">
					<area shape="circle" coords="426,409,100" href="http://www.baidu.com/">
				</map>
			</div>
		</details>
		<p>2222</p>
		<hr>

		<!-- contenteditable 可编辑 ****************************************************************** -->
		<h2>contenteditable 可编辑</h2>
		<ul class="content-editable" contenteditable="true">
			<li> 1. Milk </li>
			<li> 2. Bread </li>
			<li> 3. Honey </li>
		</ul>
		<hr>

		<!-- mark 标记 -->
		<p> 你知道吗，你可以仅使用 HTML 标签 <mark>"突出显示有趣的东西"</mark></p>
		<hr>

		<!-- dataset 获取标签的 data- ****************************************************************** -->
		<h2>dataset 获取标签的 data-</h2>
		<div id="data-attr" data-custom-attr="div上的data-custom-attr">这是一个div</div>
		<button onclick="reveal()">获取 data-</button>
		<p id="msg"></p>
		<script>
			function reveal() {
				let dataDiv = document.getElementById('data-attr');
				let value = dataDiv.dataset['customAttr'];
				document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
			}
		</script>
		<hr>

		<!-- output 输出标签****************************************************************** -->
		<h1>output 输出标签</h1>
		<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
			<input type="number" id="a" value="0">
			* <input type="number" id="b" value="0">
			= <output name="x" for="a b"></output>
		</form>
		<form oninput="x.value=parseInt(c.value) + parseInt(d.value)">
			<input type="number" id="c" value="0">
			+ <input type="number" id="d" value="0">
			= <output name="x" for="c d"></output>
		</form>
		<hr>

		<h2>datalist 数据列表，可以通过输入像表中自定义添加</h2>
		<form action="" method="get">
			<input list="fruits" name="fruit" id="fruit">
			<datalist id="fruits">
				<option value="Apple" />
				<option value="Orange" />
				<option value="Banana" />
				<hr>
				<option value="Mango" />
				<option value="Avacado" />
			</datalist>
			<input type="submit">
		</form>
		<hr>

		<!-- 滑块***************************************************************************************** -->
		<h2>range 滑块</h2>
		<style>
			/* 第一个滑块自定义样式 */
			/* 去除系统默认样式 */
			.adjust .aj_tempt input[type=range] {
				-webkit-appearance: none;
				width: 65%;
				border-radius: 10px;
			}

			.adjust .aj_tempt input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
			}

			/* 给滑动轨道(track)添加样式 */
			.adjust .aj_tempt input[type=range]::-webkit-slider-runnable-track {
				height: 5px;
				border-radius: 10px;
				background: -webkit-gradient(linear, 100% 0, 0 100%, from(#FFD973), to(#35E8EF));
			}

			.adjust .aj_tempt input[type=range]:focus {
				outline: none;
			}

			/* 给滑块(thumb)添加样式 */
			.adjust .aj_tempt input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
				height: 20px;
				width: 20px;
				margin-top: -7px;
				background: #ffffff;
				border-radius: 50%;
				border: 5px solid #35E8EF;
			}

			/* 第二个滑块自定义样式*/
			/* 去除系统默认样式 */
			.adjust .aj_light input[type=range] {
				-webkit-appearance: none;
				width: 65%;
				height: 5px;
				border-radius: 10px;
				background: -webkit-linear-gradient(#4A80FE, #4A80FE) no-repeat #DFE8FB;
				background-size: 0% 100%;
				margin-top: 12px;
			}

			.adjust .aj_light input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
			}

			/* 给滑动轨道(track)添加样式 */
			.adjust .aj_light input[type=range]::-webkit-slider-runnable-track {
				height: 5px;
				border-radius: 10px;
			}

			.page_ajOn .adjust .aj_light input[type=range]:focus {
				outline: none;
			}

			/* 给滑块(thumb)添加样式 */
			.adjust .aj_light input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
				height: 20px;
				width: 20px;
				margin-top: -7px;
				background: #ffffff;
			 border-radius: 50%;
				border: 5px solid #2566FF;
			}
		</style>
		<input id="range" type="range" name="range" min="0" max="100" step="1" value="50"
			oninput="changeValue(event)" />
		<output id="output" name="result"> </output>
		<br>
		<div class="adjust">
			<div class="aj_tempt clear">
				<img class="temp_icon fl" src="../../../img/icon/temp.png" />
				<input class="temp_rg fl" type="range" value="0" id="Range1" />
			</div>
			<div class="aj_light clear">
				<img class="light_icon fl" src="../../../img/icon/light.png" />
				<input class="light_rg fl" type="range" min="0" max="100" step="1" value="0" id="Range2" />
			</div>
			<div class="value">
				<p class="zero fl">0%</p>
				<p class="hundred fr">100%</p>
			</div>
		</div>

		<script>
			function changeValue(e) {
				let range = document.querySelector('#range')
				document.querySelector('#output').innerHTML = `<mark>${range.value}</mark>`;
			}
			changeValue()
		</script>
		<hr>

		<label for="home">/home/atapas</label>
		<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>

		<label for="root">/root</label>
		<meter id="root" value="0.9">60%</meter><br>
		<hr>
		
		<h2>inputs</h2>
		<h4>required 必填</h4>
		<form method="post">
			<input type="text" id="username1" name="username" required>
			<input type="submit" value="提交"/>
		</form>

		<div>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
			<p>11111</p>
		</div>


	</body>

</html>
<script>
</script>
